<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  开发web应用时   利用组件化开发的思想    spa
  index.html   div#app     <login></login>   <register></register>  动态性  路由
  login.vue    html  css  js
  register.vue
-->
<div id="app">
    <customer-component1></customer-component1>
    <customer-component1></customer-component1>
    <customer-component2></customer-component2>
</div>

<script>
    /*
        多个局部组件之间能不能互相引用
    * */
    let customerComponent1 = {
        template: `
            <div>
               <h1>hello vue component1</h1>
             </div>
        `,
    }

    let customerComponent2 = {
        template: `
          <div>
            <h1>hello vue component2</h1>
            <customer-component1></customer-component1>
          </div>
        `,
        //  需要使用其他组件 要先注册
        components: {
            'customer-component1': customerComponent1
        }
    }


    // 组件  根组件
    let vm = new Vue({
        el: '#app',
        data: {},
        /*组件注册   局部组件  子组件   属性名(组件名): 组件      */
        components: {
            'customer-component1': customerComponent1,
            'customer-component2': customerComponent2
        }
    })

</script>
</body>
</html>